<?php /** Template Name: Companies */ get_header(); ?>
<div class="invest-banner"></div>
<div class="logo-invests">
        <div class="searchbox">
            <form action="">
                <div>
                    <span class="labels">
                        <?php if(qtrans_getLanguage()=='tw'): ?>
                            類別
                        <?php endif; ?>
                        <?php if(qtrans_getLanguage()=='en'): ?>
                            Category
                        <?php endif; ?>
                        <?php if(qtrans_getLanguage()=='zh'): ?>
                            类别
                        <?php endif; ?>
                    </span>
                    <select name="type" id="type">
                        <option value="all">
                            <?php if(qtrans_getLanguage()=='tw'): ?>
                                全部
                            <?php endif; ?>
                            <?php if(qtrans_getLanguage()=='en'): ?>
                                All
                            <?php endif; ?>
                            <?php if(qtrans_getLanguage()=='zh'): ?>
                                全部
                            <?php endif; ?>
                        </option>
                        <?php $terms = get_terms("companies_cat");
                        $count = count($terms);
                        if($count > 0)
                        {
                            foreach ($terms as $term)
                            {
                                echo '<option value="'.$term->slug.'">'.$term->name.'</option>';
                            }
                        }  ?>
                    </select>
                </div>
                <div>
                    <span class="labels">
                        <?php if(qtrans_getLanguage()=='tw'): ?>
                            地區
                        <?php endif; ?>
                        <?php if(qtrans_getLanguage()=='en'): ?>
                            Location
                        <?php endif; ?>
                        <?php if(qtrans_getLanguage()=='zh'): ?>
                            地区
                        <?php endif; ?>
                    </span>
                    <select name="region" id="region">
                        <option value="all">
                            <?php if(qtrans_getLanguage()=='tw'): ?>
                                全部
                            <?php endif; ?>
                            <?php if(qtrans_getLanguage()=='en'): ?>
                                All
                            <?php endif; ?>
                            <?php if(qtrans_getLanguage()=='zh'): ?>
                                全部
                            <?php endif; ?>
                        </option>
                        <?php $terms = get_terms("companies_location");
                        $count = count($terms);
                        if($count > 0)
                        {
                            foreach ($terms as $term)
                            {
                                echo '<option value="'.$term->slug.'">'.$term->name.'</option>';
                            }
                        }  ?>
                    </select>
                </div>

            </form>
        </div>
        <div class="modalbox">
            <div class="modal-close">X</div>
            <div class="modalposition">
                <div class="syn">
                    <h3><span>PAMILY</span><span>宠拍</span></h3>
                    <div><span class="modal-title">地区</span>：<span class="modal-text">台北</span></div>
                    <div><span class="modal-title">类型</span>：<span class="modal-text">移动应用</span></div>
                    <div><span class="modal-title">相关链接</span>：<span class="modal-text"><a href="https://temai.m.taobao.com">https://temai.m.taobao.com</a></span></div>
                    <p class="modal-syn">宠拍Pamily 是宠物专属的影片社群，让热爱宠物的社群在这里记录心爱夥伴的生活故事。宠拍上线三个月便突破 40 万支影片，等于每 20 秒便有一支影片上传，并且荣登 Product Hunt 前十名。</p>
                </div>
                <div class="headimg">
                    <div class="imgbox">
                        <div class="img">
                            <img style="width:100%;" src="http://cherubicvc.com/wp-content/uploads/2017/09/Jindanlicai-CEO.jpg" alt="">
                        </div>
                    </div>
                    <h3>沈荣康</h3>
                    <h3>CEO</h3>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row invest-logobox">
                <?php
                $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                $args = array(
                    'post_type' => 'type_companies',
                    'orderby' => 'title',
                    'order' => 'ASC' ,
                    'paged' => $paged
                );
                query_posts($args);
                if ( have_posts() ) : while ( have_posts() ) : the_post();?>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 logo" type="<?php $terms = get_the_terms( $post->ID, 'companies_cat', "fields=names") ;$count = count($terms);if($count > 0) {foreach ($terms as $term){echo $term->slug.' , ';}} ?>" region="<?php $terms = get_the_terms( $post->ID, 'companies_location', "fields=names") ;$count = count($terms);if($count > 0) {foreach ($terms as $term){echo $term->slug.' , ';}} ?>">
                    <img src="<?php the_post_thumbnail_src(''); ?>" alt="<?php the_title(); ?>">
                    <div class="modal-img-synn">
                        <div class="syn">
                            <h3><span><?php the_title(); ?></span></h3>
                            <div>
                                <span class="modal-title">
                                    <?php if(qtrans_getLanguage()=='tw'): ?>
                                        地區
                                    <?php endif; ?>
                                    <?php if(qtrans_getLanguage()=='en'): ?>
                                        Location
                                    <?php endif; ?>
                                    <?php if(qtrans_getLanguage()=='zh'): ?>
                                        地区
                                    <?php endif; ?>
                                </span>：
                                <span class="modal-text">
                                    <?php $terms = get_the_terms( $post->ID, 'companies_location', "fields=names") ;$count = count($terms);if($count > 0) {
                                        foreach ($terms as $term){
                                            echo $term->name.'<b>, </b>';}}
                                    ?>
                                </span>
                            </div>
                            <div>
                                <span class="modal-title">
                                    <?php if(qtrans_getLanguage()=='tw'): ?>
                                        類別
                                    <?php endif; ?>
                                    <?php if(qtrans_getLanguage()=='en'): ?>
                                        Category
                                    <?php endif; ?>
                                    <?php if(qtrans_getLanguage()=='zh'): ?>
                                        类别
                                    <?php endif; ?>
                                </span>：
                                <span class="modal-text">
                                    <?php
                                    $terms = get_the_terms( $post->ID, 'companies_cat', "fields=names") ;
                                    $count = count($terms);if($count > 0) {
                                        foreach ($terms as $term){
                                            echo $term->name.'<b>, </b>' ;}}
                                    ?>
                                </span>
                            </div>
                            <div>
                                <span class="modal-title">
                                    <?php if(qtrans_getLanguage()=='tw'): ?>
                                        相關連結
                                    <?php endif; ?>
                                    <?php if(qtrans_getLanguage()=='en'): ?>
                                        Website
                                    <?php endif; ?>
                                    <?php if(qtrans_getLanguage()=='zh'): ?>
                                        相关连结
                                    <?php endif; ?>
                                </span>：
                                <span class="modal-text">
                                    <a href="<?php echo get_post_meta($post->ID, "companies_setting_link", $single = true) ?>" target="_blank"><?php echo get_post_meta($post->ID, "companies_setting_link", $single = true) ?></a>
                                </span>
                            </div>
                            <p class="modal-syn"><?php the_pure_content(); ?></p>
                        </div>
                        <div class="headimg">
                            <div class="imgbox">
                                <div class="img">
                                    <?php if (get_post_meta($post->ID, "companies_setting_ceo_link", $single = true)) {
                                        echo _e("<a href='");
                                        echo _e(get_post_meta($post->ID, 'companies_setting_ceo_link', $single = true)."' target='_blank'>".get_image('companies_setting_ceo_img',1,1,1,null,null,array('style'=>'width:100%')));
                                        echo _e("</a>");
                                    } else {
                                        echo _e(get_image('companies_setting_ceo_img'));
                                    } ?>
                                </div>
                            </div>
                            <h3>
                                <?php if(qtrans_getLanguage()=='tw'): ?>
                                    <?php echo get_post_meta($post->ID, "companies_setting_ceo_title_tw", $single = true) ?>
                                <?php endif; ?>
                                <?php if(qtrans_getLanguage()=='en'): ?>
                                    <?php echo get_post_meta($post->ID, "companies_setting_ceo_title", $single = true) ?>
                                <?php endif; ?>
                                <?php if(qtrans_getLanguage()=='zh'): ?>
                                    <?php echo get_post_meta($post->ID, "companies_setting_ceo_title_cn", $single = true) ?>
                                <?php endif; ?>
                            </h3>
                            <h3><?php echo get_post_meta($post->ID, "companies_setting_ceo_desc", $single = true) ?></h3>
                        </div>
                    </div>
                </div>
                <?php endwhile; else: ?>
                <?php endif;wp_reset_query()?>
            </div>
        </div>
    </div>
<?php get_footer(); ?>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
    })
    var logobox = $('.invest-logobox>.logo');
    $('#type').change(function(){
        changed();
    })
    $('#region').change(function(){
        changed();
    })
    function changed(){
        var val1 = $("#type").val();
        var val2 = $("#region").val();
        if(val1 == 'all' && val2 == 'all'){
            logobox.removeClass('hidden');
        }
        if(val1 == 'all' && val2 != 'all'){
            logobox.addClass('hidden');
            $('.invest-logobox>.logo').each(function(){
                if ($(this).attr('region').indexOf(val2) >= 0) {
                    $(this).removeClass('hidden');
                }
            });
        }
        if(val1 != 'all' && val2 == 'all'){
            logobox.addClass('hidden');
            $('.invest-logobox>.logo').each(function(){
                if ($(this).attr('type').indexOf(val1) >= 0) {
                    $(this).removeClass('hidden');
                }
            });
        }
        if(val1 != 'all' && val2 != 'all'){
            logobox.addClass('hidden');
            $('.invest-logobox>.logo').each(function(){
                if ($(this).attr('region').indexOf(val2) >= 0 && $(this).attr('type').indexOf(val1) >= 0) {
                    $(this).removeClass('hidden');
                }
            });
        }
    }


    function position(e){
        var width = e.target.offsetWidth;
        var height = e.target.offsetHeight;//目标元素的宽高
        var x = e.target.x;
        var y = e.target.y;//目标元素的偏移
        var screenwidth = $(window).width();
        var screenheight = $(window).height();//浏览器的宽高
        var modalwidth = $('.modalbox').width();
        var modalheight = $('.modalbox').height();//modal宽高
        // 默认模态框出现在右侧
        if((screenwidth-x-width-modalwidth) >= 0){
            var offsetx = x+width;
            var offsety = y+(height-modalheight)/2;
        }else
        //判断左侧是否可以放下模态框
        if((x-modalwidth) >= 0){
            var offsetx = x-modalwidth;
            var offsety = y+(height-modalheight)/2;
        }else
        // 判断目标元素顶部是否可以发下模态框
        if((y-modalheight) >= 0){
            var offsetx = x+(width-modalwidth)/2;
            var offsety = y-modalheight;
        }else
        // 判断目标元素底部是否可以发下模态框
        if((screenheight-y-height-modalheight) >= 0){
            var offsetx = x+(width-modalwidth)/2;
            var offsety = y+height;
        }else
        //四周都不能放的时候，放中间
        {
            var offsetx = x+(width-modalwidth)/2;
            var offsety = y+(height-modalheight)/2;
        }
        $('.modalbox').css({left:offsetx,top:offsety-($('.invest-banner').height()),display:'block'});
    }
    function modalInner(obj){
        var html = $(obj).next('.modal-img-synn').html();
        $('.modalposition').html(html);
    }
    $('.invest-logobox').on('click','.logo > img',function(e){
        modalInner(this);
        position(e);
    })
    $('.modalbox>.modal-close').on('click',function(){
        $('.modalbox').css({display:'none'});
    })
</script>
</body>
</html>
